<template>
<view class="forgetPassword-box h100 bg-white text-black">
  <security-code
    event="findpwd"
    :hasCaptcha="true"
    phonePlaceholder="请输入手机号码"
    smsCodeTitle="手机验证码"
    smsCodePlaceholder="请输入验证码"
    @onChange="getSecurityParams">
  </security-code>
  <form action="">
    <view class="cu-form-group border-bottom">
      <view class="title">新密码</view>
      <input type="text" password :placeholder="`请输入新密码`" :maxlength="16" name="newpassword" @input="newPwdInput"/>
    </view>
  </form>

  <view class="flex flex-direction margin-top-xl padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onAction">找回密码</button>
  </view>
</view>
</template>

<script>
import securityCode from '@/components/security-code/security-code'

export default {
  name: 'forgetPassword',
  components: { securityCode },
  data () {
    return {
      mobile: '',
      code: '',
      newpassword: ''
    }
  },
  computed: {
    findPwdParams() {
      return {
        mobile: this.mobile,
        newpassword: this.newpassword,
        code: this.code
      }
    }
  },
  onLoad() {
  },
  methods: {
    newPwdInput(e) {
      this.newpassword = e.detail.value.trim()
    },
    onAction() {
      this.$api.findPwd(this.findPwdParams).then(async res => {
        if (!res) return
        console.log('找回密码', res)
        await this.$showSuccessToast('成功设置新密码')
        this.gotoHomePage()
      })
    },
    getSecurityParams(params) {
      this.mobile = params.mobile
      this.code = params.smsCode
    },
    gotoHomePage() {
      this.$Router.pushTab({ name: 'home' })
    }
  }
}
</script>

<style lang="less">
.cu-form-group .title { // 统一form内的title宽度
  min-width: calc(4em + 30px);
}
</style>
